<template>
  {{ student }}
  <hr />
  <StudentVue
    @change-student="getNewStudent"
    @change-age-and-name="getNewAgeAndName"
    @change-age="getNewAge"
  />
  <!-- 监听子组件事件，并与触发本地事件 -->
</template>

<script>
import StudentVue from './组件事件--字符串数组式--子.vue'

export default {
  components: { StudentVue },
  data: () => ({
    student: {
      name: 'Jack',
      age: 18,
      sex: '男',
    },
  }),
  methods: {
    getNewAge(newAge) {
      // 获取子组件传递值
      console.log('年龄的新值：' + newAge)
      this.student.age = newAge
    },
    getNewAgeAndName(newAge, newName) {
      console.log('年龄的新值：' + newAge)
      console.log('名字的新值：' + newName)
      this.student.age = newAge
      this.student.name = newName
    },
    getNewStudent(stu) {
      console.log('学生新值：')
      console.log(stu)
      this.student.age = stu.age
      this.student.name = stu.name
      this.student.sex = stu.sex
    },
  },
}
</script>

<script setup>
import { reactive } from 'vue'
import StudentVue from './组件事件--字符串数组式--子.vue'

let student = reactive({
  name: 'Jack',
  age: 18,
  sex: '男',
})

function getNewAge(newAge) {
  // 获取子组件传递值
  console.log('年龄的新值：' + newAge)
  student.age = newAge
}

function getNewAgeAndName(newAge, newName) {
  console.log('年龄的新值：' + newAge)
  console.log('名字的新值：' + newName)
  student.age = newAge
  student.name = newName
}

function getNewStudent(stu) {
  console.log('学生新值：')
  console.log(stu)
  student.age = stu.age
  student.name = stu.name
  student.sex = stu.sex
}
</script>
